<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 
				条件渲染：
							1.v-if
										写法：
											(1).v-if="表达式" 
											(2).v-else-if="表达式"
											(3).v-else
										适用于：切换频率较低的场景。
										特点：不展示的DOM元素直接被移除。
										注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
							2.v-show
										写法：v-show="表达式"
										适用于：切换频率较高的场景。
										特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)
							3.备注：
									（1）使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
									（2）v-if配合template可以实现批量切换，v-show则不可以。
			-->

			<!-- v-if="表达式" 表达式要形成一个布尔值 -->
			<!-- <h2 v-if="false">你好啊！，{{name}}</h2> -->
			<!-- <h2 v-if="1 === 0">你好啊！！，{{name}}</h2> -->

			<!-- v-show="表达式" 表达式要形成一个布尔值 -->
			<!-- <h2 v-show="false">你好啊！！！，{{name}}</h2> -->
			<!-- <h2 v-show="1 === 4">你好啊！！！！，{{name}}</h2> -->

			<!-- v-if实现简单效果 -->
			<!-- <h2>当前求和为:{{sum}}</h2> -->
			<!-- <h3 v-if="sum === 1">Angular</h3> -->
			<!-- <h3 v-else-if="sum === 2">React</h3> -->
			<!-- <h3 v-else-if="sum === 3">Vue</h3> -->
			<!-- <h3 v-else>哈哈哈哈哈</h3> -->
			<!-- <button @click="sum++">+1</button> -->
			

			<!-- v-show实现简单效果 -->
			<!-- <h2>当前求和为:{{sum}}</h2> -->
			<!-- <h3 v-show="sum === 1">Angular</h3> -->
			<!-- <h3 v-show="sum === 2">React</h3> -->
			<!-- <h3 v-show="sum === 3">Vue</h3> -->
			<!-- <button @click="sum++">+1</button> -->

			<h2>当前求和为:{{sum}}</h2>
			<template v-if="sum === 1">
				<h3>Angular</h3>
				<h3>React</h3>
				<h3>Vue</h3>
			</template>
			<button @click="sum++">+1</button>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'佩奇',
				sum:0
			}
		})
	</script>
</html>